<template>
  <div>
    <!-- 跟组件随意,并非一定是div -->
    <a :href="href" :class="`my-link ${type}`" :target="target">
      <slot />
    </a>
  </div>
</template>

<script>
export default {
  props: {
    // type属性,默认值为default
    type: { default: "default" },
    href: { default: "" },
    target: { default: "_self" },
  },
};
</script>

<style lang="scss" scoped>
.my-link {
  text-decoration: none;
  &:hover {
    opacity: 0.9;
    text-decoration: underline;
  }
  &.default {
    color: #333;
  }
  &.primary {
    color: #409eff;
  }
  &.success {
    color: #67c23a;
  }
  &.warning {
    color: #e6a23c;
  }
  &.danger {
    color: #f56c6c;
  }
  &.warning {
    color: #909399;
  }
}
</style>